<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>汇客CRM管理系统</title>
    <link rel="shortcut icon" href="../../favicon.ico" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/transition.css" />
    <link rel="stylesheet" href="../../styles/element-ui.css" />
    <link rel="stylesheet" href="../../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/index.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <style>
    .app-container{
      min-height: 618px;
    }
    </style>
  </head>

  <body>
    <div class="app-container customer-page-box" id="course-app">
      <el-form ref="queryForm" class="cus-search-box" :model="queryParams">
        <el-form-item label="课程编号" prop="code">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入课程编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="课程名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入课程名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="适用人群" prop="applicablePerson">
          <el-select v-model="queryParams.applicablePerson" placeholder="请选择适用人群" clearable>
            <el-option
              v-for="dict in applicablePersonOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="createTime"
            clearable
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="课程学科" prop="subject">
          <el-select v-model="queryParams.subject" placeholder="请选择课程学科" clearable>
            <el-option
              v-for="dict in subjectOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item class="search-btn wp-75">
          <el-button class="cus-search-btn" type="primary" @click="handleQuery">搜索</el-button>
          <el-button class="cus-reset-btn" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="cus-btn-box">
        <div class="label">已选<span class="num">{{ ids.length }}</span>项</div>
        <div class="cus-btn-con">
          <el-button class="primary-btn" @click="addOrUpdateHandle()">添加课程</el-button>
          <el-button class="default-btn" :disabled="multiple" @click="handleDelete()">批量删除</el-button>
        </div>
      </div>

      <div v-loading="dataListLoading" :class="{ 'loading-box': dataListLoading }">
        <div v-show="dataList && dataList.length > 0">
          <el-table
            stripe
            class="cus-table-box"
            :data="dataList"
            @selection-change="handleSelectionChange"
            @sort-change="dataListSortChangeHandle"
          >
            <el-table-column type="selection" width="62" align="center"></el-table-column>
            <el-table-column label="课程编号" min-width="100" align="center" prop="code"></el-table-column>
            <el-table-column
              label="课程学科"
              min-width="100"
              align="center"
              prop="subject"
              :formatter="subjectFormat"
            ></el-table-column>
            <el-table-column label="课程名称" min-width="100" align="center" prop="name"></el-table-column>
            <el-table-column label="价格(元)" min-width="100" align="center" prop="price"></el-table-column>
            <el-table-column
              label="适用人群"
              min-width="100"
              align="center"
              prop="applicablePerson"
              :formatter="applicablePersonFormat"
            ></el-table-column>
            <el-table-column
              label="课程介绍"
              min-width="120"
              align="center"
              prop="info"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="创建时间"
              min-width="120"
              align="center"
              prop="createTime"
              sortable
            ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button size="mini" type="text" class="del-text" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div v-show="total > 0" class="pagination-container">
            <el-pagination
              :background="false"
              :current-page.sync="pageNum"
              :page-size.sync="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 30, 50]"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
        <!-- 空数据 -->
        <div
          class="empty-box table-empty-box"
          v-show="(!dataList || dataList.length <= 0) && !dataListLoading"
          style="height: calc(100vh - 66px - 215px - 83px)"
        >
          <img class="icon" src="../../images/icon-empty.png" />
          <span class="label">暂无内容</span>
        </div>
      </div>

      <!-- 弹窗, 新增 / 修改 -->
      <!-- 添加或修改线索管理对话框 -->
      <el-dialog
        :title="!form.id ? '添加课程' : '修改课程'"
        :visible.sync="visible"
        width="618px"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form ref="form" class="cus-search-box cus-dialog-form-box" :model="form" :rules="rules">
          <el-form-item label="课程学科" prop="subject">
            <el-select v-model="form.subject" placeholder="请选择课程学科">
              <el-option
                v-for="dict in subjectOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="课程名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入课程名称" maxlength="10" />
          </el-form-item>
          <el-form-item label="适应人群" prop="applicablePerson">
            <el-select v-model="form.applicablePerson" placeholder="请选择适应人群">
              <el-option
                v-for="dict in applicablePersonOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="课程价格" prop="price">
            <el-input-number
              v-model="form.price"
              :precision="0"
              :step="1"
              placeholder="请输入课程价格"
              controls-position="right"
              :min="0"
              :max="99999"
            />
            <!-- <el-input v-model="form.price" placeholder="请输入课程价格" /> -->
          </el-form-item>
          <el-form-item label="课程介绍" prop="info" class="wp-100">
            <el-input
              v-model="form.info"
              type="textarea"
              placeholder="请输入课程介绍"
              :rows="2"
              maxlength="20"
              resize="none"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cus-reset-btn" @click="visible = false">取 消</el-button>
          <el-button class="cus-search-btn" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/course/course.js"></script>
    <script src="../../api/system/dict/data.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/validate.js"></script>

    <script>
      new Vue({
        el: '#course-app',
        data() {
          return {
            dataListLoading: false,
            dataList: [], // 列表数据
            pageNum: 1, // 当前页码
            pageSize: 10, // 每页数
            total: 0, // 总条数
            order: null, // 排序，asc／desc
            orderField: null, // 排序，字段
            ids: [],
            dataListSelections: [],
            single: true, // 非单个禁用
            multiple: true, // 非多个禁用
            createTime: '',
            queryParams: {
              code: '',
              name: '',
              applicablePerson: '',
              params: {
                beginCreateTime: '',
                endCreateTime: '',
              },
              subject: '',
            },
            // 课程学科字典
            subjectOptions: [],
            // 适用人群字典
            applicablePersonOptions: [],
            // 弹出框显示隐藏
            visible: false,
            // 表单参数
            form: {
              id: null,
              name: null,
              subject: null,
              price: undefined,
              applicablePerson: null,
              info: null,
            },
          }
        },
        computed: {
          rules() {
            return {
              name: [
                { required: true, message: '课程名称不能为空', trigger: 'blur' },
                { validator: isVerification, message: '禁止输入特殊字符' },
              ],
              subject: [{ required: true, message: '课程学科不能为空', trigger: 'change' }],
              price: [{ required: true, message: '课程价格不能为空', trigger: 'blur' }],
              applicablePerson: [{ required: true, message: '适应人群不能为空', trigger: 'change' }],
            }
          },
        },
        watch: {
          createTime(val) {
            console.log(val)
            if (val && val.length >= 2) {
              this.queryParams.params.beginCreateTime = val[0]
              this.queryParams.params.endCreateTime = val[1]
            } else {
              this.queryParams.params.beginCreateTime = ''
              this.queryParams.params.endCreateTime = ''
            }
          },
        },
        created() {
          getDicts('course_subject').then((response) => {
            this.subjectOptions = response.data
          })
          getDicts('applicable_person').then((response) => {
            this.applicablePersonOptions = response.data
          })
          this.getList()
        },
        methods: {
          // 获取列表数据
          getList() {
            this.dataListLoading = true
            listCourse({
              order: this.order,
              orderField: this.orderField,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              ...this.queryParams,
            })
              .then((res) => {
                this.dataListLoading = false
                if (res.code !== 200) {
                  this.dataList = []
                  this.total = 0
                  return this.$message.error(res.msg)
                }
                this.dataList = res.rows
                this.total = res.total
                console.log('-=-=-res=-=-=-=', this.dataList)
              })
              .catch(() => {
                this.dataListLoading = false
              })
          },
          // 排序
          dataListSortChangeHandle(data) {
            if (!data.order || !data.prop) {
              this.order = ''
              this.orderField = ''
              return false
            }
            this.order = data.order.replace(/ending$/, '')
            this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
            this.getList()
          },
          /** 搜索按钮操作 */
          handleQuery() {
            this.pageNum = 1
            this.getList()
          },
          // 课程学科字典翻译
          subjectFormat(row) {
            return selectDictLabel(this.subjectOptions, row.subject)
          },
          // 适用人群字典翻译
          applicablePersonFormat(row) {
            return selectDictLabel(this.applicablePersonOptions, row.applicablePerson)
          },
          /** 重置按钮操作 */
          resetQuery() {
            this.$refs['queryForm'].resetFields()
            this.createTime = null
            this.queryParams.params.beginCreateTime = ''
            this.queryParams.params.endCreateTime = ''
            this.handleQuery()
          },
          // 分页
          handleSizeChange(val) {
            this.pageSize = val
            this.getList()
          },
          // 分页
          handleCurrentChange(val) {
            this.pageNum = val
            this.getList()
          },
          // 多选框选中数据
          handleSelectionChange(selection) {
            this.dataListSelections = selection
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
          },
          // 删除
          handleDelete(id) {
            const ids = id || this.ids
            if (!ids && this.dataListSelections.length <= 0) {
              return this.$message({
                message: '请选择至少一条数据',
                type: 'warning',
                duration: 500,
              })
            }
            this.$confirm('确定将选择数据删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(() => {
                return delCourse(ids)
              })
              .then((res) => {
                if (res.code !== 200) {
                  return this.$message.error(res.msg)
                }
                this.getList()
                this.$message.success('删除成功')
              })
              .catch(() => {})
          },
          // 新增 / 修改
          addOrUpdateHandle(id) {
            this.form.id = id
            this.formInit()
          },
          // 新增/修改弹框初始化
          formInit() {
            this.visible = true
            this.$nextTick(() => {
              this.$refs.form.resetFields()
              if (this.form.id) {
                this.getInfo()
              }
            })
          },
          // 获取信息
          getInfo() {
            getCourse(this.form.id)
              .then((res) => {
                if (res.code !== 200) {
                  return this.$message.error(res.msg)
                }
                this.form = {
                  ...this.form,
                  ...res.data,
                }
              })
              .catch(() => {})
          },
          /** 提交按钮 */
          async submitForm() {
            this.$refs.form.validate(async (valid) => {
              if (valid) {
                const res = await (this.form.id ? updateCourse : addCourse)(this.form)
                if (res.code !== 200) {
                  return this.$message.error(res.msg)
                }
                this.$message.success('操作成功')
                this.visible = false
                this.handleQuery()
              }
            })
          },
        },
      })
    </script>
  </body>
</html>
